<template>
    <div class="order-refund-list-item">
        <div class="order-refund-list-item-l1 van-hairline--bottom">
            <div class="order-list-item-store">
                <van-icon name="shop-o" :size="20"/>
                <span class="order-list-item-store-name">{{storeName}}</span>
            </div>
            <div class="order-refund-list-item-status">{{statusLabel}}</div>
        </div>
        <white-space/>
        <order-refund-item v-for="item in refund.items" :key="item.id" :item="item" @click="handleRouteToRefund"/>
        <div class="order-refund-list-item-amounts">
            <div class="total-amount">
                <span class="amount-label">总退款</span>
                <price :value="refund.totalAmount" :size="16"/>
            </div>
        </div>
        <white-space/>
        <div class="van-hairline--top order-refund-list-item-actions">
            <order-refund-actions :refund="refund" @cancel="$emit('cancel')"/>
        </div>
    </div>
</template>

<script>
  import { order } from "@mall/api-services"
  import { Button, Icon } from "vant"
  import OrderRefundItem from "@/components/order/OrderRefundItem"
  import WhiteSpace from "@/components/WhiteSpace"
  import Price from "@/components/Price"
  import OrderActions from "@/components/order/OrderActions"
  import OrderRefundActions from "@/components/order/OrderRefundActions"

  const { OrderRefundStatus } = order

  export default {
    name: "OrderRefundListItem",
    components: {
      OrderRefundActions,
      OrderActions,
      WhiteSpace,
      OrderRefundItem,
      Price,
      [Button.name]: Button,
      [Icon.name]: Icon,
    },
    props: {
      refund: order.OrderRefund,
      storeId: String,
      storeName: String,
    },
    computed: {
      statusLabel() {
        const { status } = this.refund
        if (OrderRefundStatus.Applying === status) {
          return "等待商家确认"
        } else if (OrderRefundStatus.Disapproved === status) {
          return "退款未批准"
        } else if (OrderRefundStatus.Pending === status) {
          return "退款处理中"
        } else if (OrderRefundStatus.Succeeded === status) {
          return "退款成功"
        } else if (OrderRefundStatus.Failed === status) {
          return "退款失败"
        }
        return "未知"
      },
    },
    methods: {
      handleRouteToRefund() {
        const { refund } = this
        this.$router.push(`/orders/${refund.orderId}/refunds/${refund.id}`)
      },
    },
  }
</script>

<style lang="scss" scoped>
    @import "../../styles/variables";

    .order-refund-list-item {
        background: #fff;
        margin-bottom: 9px;

        .order-refund-list-item-l1 {
            padding: 9px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            line-height: 1rem;

            .order-list-item-store {
                display: inline-flex;
                align-items: center;

                .order-list-item-store-name {
                    margin-left: 4px;
                    font-weight: 700;
                    line-height: 1rem;
                }
            }

            .order-refund-list-item-status {
                font-size: 13px;
                color: $danger-color;
            }
        }

        .order-refund-list-item-amounts {
            display: flex;
            justify-content: flex-end;
            padding: 0 9px;

            .amount-label {
                margin-right: 4px;
                font-size: 14px;
            }

            .total-amount {
                display: inline-flex;
                align-items: flex-end;
            }
        }

        .order-refund-list-item-actions {
            padding: 9px;
            display: flex;
            justify-content: flex-end;

            .van-button {
                margin-left: 9px;
                width: 72px;
            }
        }
    }
</style>
